<template>
  <div>
    <div class="process-item">
      <div v-for="(list, i) in items" :key="i" :style="{marginBottom: isCarbonCopy && 0}" class="process-item-box">
        <div class="process-item-hd">
          <div class="flex-center" style="justify-content: space-between;">
            <!-- 评论节点 -->
            <template v-if="isComment">
              <div :class="{'flex-wrap': showMobilePage }" class="comment-user-info">
                <div class="flex-center">
                  <user-card :size="28" :user-data="list" id-key="userId" style="transform: translateY(3px)" />
                  <span class="comment-username">{{ list.userName }}</span>
                  <div class="flex">
                    <div :class="`status status${-1}`">评论</div>
                  </div>
                </div>
                <span class="comment-time">{{ list.time / 1000 | standardFormat('YYYY/MM/DD HH:mm') }}</span>
              </div>
            </template>
            <!-- 抄送节点 -->
            <template v-else-if="isCarbonCopy">
              <template v-if="i === 0">
                <ToolTip :content="carbonCopyName" class="flex-item">
                  <span class="title" style="display: inline-block;">{{ carbonCopyName || '--' }}</span>
                </ToolTip>
                <div v-if="showNodeTime(list)" class="time">{{ list.time / 1000 | standardFormat('YYYY/MM/DD HH:mm') }}</div>
              </template>
            </template>
            <template v-else>
              <ToolTip :content="list.title" class="flex-item">
                <span class="title" style="display: inline-block;">{{ list.title || '--' }}</span>
              </ToolTip>
              <!-- 未审批状态不显示时间 -->
              <div v-if="showNodeTime(list)" class="time">{{ list.time / 1000 | standardFormat('YYYY/MM/DD HH:mm') }}</div>
            </template>
          </div>
        </div>

        <!-- 评论节点 -->
        <template v-if="isComment">
          <div class="comment-node-container">
            <div class="comment-content-outbox" style="display: flex">
              <div
                :class="'commentBox_'+list.id"
                :style="{maxHeight: isShowAllContent ? 'none' : 'calc(6em + 8px)'}"
                class="comment-content-box">
                <el-button
                  v-if="showToggleBtn"
                  :class="isShowAllContent ? '' : 'comment-content-ellipsis'"
                  size="mini"
                  type="text"
                  class="comment-action-btn"
                  @click="commentShowTypeChange">
                  {{ isShowAllContent ? '收起' : '展开' }}
                </el-button>
                <div class="comment-content" v-html="setNotifyToDom(list)" />
              </div>
            </div>
            <div v-if="list.attachment && list.attachment.length" class="comment-content-extra flex-center">
              <span style="margin-right: 4px">附件:</span>
              <FileShowList :file-list="list.attachment || []" is-show-single-file />
            </div>
            <!--引用评论被删除-->
            <template v-if="list.quoteInfoIsDelete">
              <div class="comment-content-extra">此评论已删除</div>
            </template>
            <div v-else-if="list.quoteInfo && list.quoteInfo.content" class="comment-content-extra ellipsisOne" v-html="setQuoteComment(list.quoteInfo)" />
          </div>
          <div class="comment-reply">
            <el-button v-if="canDelComment(list)" type="text" @click="handleCommentDel(list)">
              <span style="color: red; margin-right: 6px">删除</span>
            </el-button>
            <div class="comment-action" @click="onReplyComment(list)">
              <span style="flex-shrink: 0;">回复</span>
              <i class="el-icon-chat-dot-square"/>
            </div>
          </div>
        </template>
        <!-- 任务结束item只显示标题栏 -->
        <div v-else-if="list.title !== '任务结束'" class="process-item-bd">
          <!-- 流程状态章 -->
          <!-- <div v-if="showProcessStatus" :class="`process-status process-status${processStatus}`" /> -->
          <div class="operator-info">
            <!-- 手动抄送节点显示 -->
            <div v-if="list.title === '添加人员抄送'" :style="{paddingRight: showAllAction(list.sendOperator) ? '75px' : 0}" class="approver-change-info">
              <AuditorAvatar :is-fly-user="isFlyNotice" :slice-num="showMobilePage ? 1 : 2" :user-list="setUserList([list.creator])" :show-badge="!!list.isSeries" />
              <div style="width: 64px">
                <div class="arrow-icon">抄送至</div>
              </div>
              <AuditorAvatar :is-fly-user="isFlyNotice" :slice-num="showMobilePage ? 1 : 2" :user-list="setUserList(list.sendOperator)" :show-badge="!!list.isSeries" @showAllUser="showMobilePage && showAllOperator(list)" />
              <div v-if="showAllAction(list.sendOperator)" class="drop-btn" @click="showAllOperator(list)">查看全部</div>
            </div>
            <!-- 流程为审批转交 -->
            <template v-else-if="list.status === PROCESS_NODE_STATUS.PERSON_CHANGE || list.personChangeInfo">
              <div class="approver-change-info">
                <div :style="`${showMobilePage ? 'flex-wrap: wrap' : ''}`" class="change-info-box">
                  <div class="avatar">
                    <user-card :is-fly-user="isFlyNotice" :user-data="list.personChangeInfo.handover" />
                  </div>
                  <div :title="list.personChangeInfo.handover.name" :style="`${showMobilePage ? 'width:auto' : ''}`" class="username">{{ list.personChangeInfo.handover.name }}</div>
                </div>
                <div style="width: 64px">
                  <div class="arrow-icon">{{ list.status === PROCESS_NODE_STATUS.PERSON_CHANGE ? '变更为' : '转交至' }}</div>
                </div>
                <div :style="`${showMobilePage ? 'flex-wrap: wrap' : ''}`" class="change-info-box">
                  <div class="avatar">
                    <user-card :is-fly-user="isFlyNotice" :user-data="list.personChangeInfo.recipient" />
                  </div>
                  <div :title="list.personChangeInfo.recipient.name" :style="`${showMobilePage ? 'width:auto' : ''}`" class="username">{{ list.personChangeInfo.recipient.name }}</div>
                </div>
              </div>
            </template>
            <!-- 已审批 显示审批人/申请人 -->
            <template v-else-if="list.executor && list.executor.length && list.title !== '任务发起'">
              <AuditorAvatar :is-fly-user="isFlyNotice" :slice-num="showMobilePage ? 1 : 2" :user-list="list.executor" :show-badge="!!list.isSeries" :is-reverse="!!list.isSeries" sort-user />
              <div class="flex">
                <div :class="`status status${list.status}`">
                  {{ list.status | mapOptions(statusOptions) }}
                </div>
              </div>
            </template>
            <!-- 任务开始节点 流程发起人 -->
            <!-- v-else-if="showProcessStatus && list.creator && JSON.stringify(list.creator) !== '{}'" -->
            <template v-else-if="list.title === '任务发起'">
              <div class="avatar">
                <user-card :is-fly-user="isFlyNotice" :user-data="(list.executor && list.executor.length && list.executor[0]) || list.creator" />
              </div>
              <div>
                <div class="flex">
                  <div class="name">{{ (list.executor && list.executor.length && list.executor[0].name) || list.creator.name || '无' }}</div>
                  <div :class="`status status${list.status}`">
                    {{ list.status | mapOptions(statusOptions) }}
                    <!-- <span class="icon" /> -->
                  </div>
                </div>
                <div
                  v-if="list.creator && list.executor && list.executor.length && list.creator.id !== list.executor[0].id"
                  class="creator"
                  style="margin-top: 6px;">
                  发起人：<span>{{ list.creator.name }}</span>
                </div>
              </div>
            </template>
            <!-- 都未审批 优先显示本人信息 无则显示第一个 -->
            <template v-else>
              <AuditorAvatar :is-fly-user="isFlyNotice" :slice-num="showMobilePage ? 1 : 2" :user-list="setUserList(list.users)" :show-badge="!!list.isSeries" />
              <div class="flex">
                <div :class="`status status${list.status}`">
                  {{ list.status | mapOptions(statusOptions) }}
                  <!-- <span class="icon" /> -->
                </div>
              </div>
            </template>
            <!-- v-if="list.users && list.users.length > (list.executor ? 0 : 1)" -->
            <!--:class="showDot(list.executor, list.users) ? 'drop-btn dot' : 'drop-btn'"-->
            <div v-if="showCheckAllBtn(list)" class="drop-btn" @click="openDialog(list)">查看全部</div>
          </div>
          <!-- 完成审批操作的才会显示模块 -->
          <!-- [4, 5, 14].includes(list.status) && !showProcessStatus -->
          <template v-if="[4, 5, 14].includes(list.status) && list.title !== '任务发起'">
            <div v-if="(list.isRichText === 0 && list.remark) || (list.isRichText === 1 && switchHtml(list.remarkRichText))" class="extra-box">
              <div :class="{'ellipsisTwo': (list.isRichText === 0 && !dropDowm) || list.isRichText === 1}">
                <span class="label">审批意见：</span>
                <el-tooltip v-if="list.isRichText === 1" :open-delay="800" placement="top" content="点击查看全部">
                  <span style="cursor:pointer;" @click="checkRichText(list.remarkRichText)">
                    <span v-html="switchHtml(list.remarkRichText)">{{ switchHtml(list.remarkRichText) || '无' }}</span>
                  </span>
                </el-tooltip>
                <ToolTip v-else :content="list.remark || '无'" is-can-click @handelClick="dropDowm = !dropDowm" />
              </div>
              <!-- <div v-if="list.isRichText === 1 && list.remarkRichText" class="drop-btn" @click="checkRichText(list.remarkRichText)">查看全部</div> -->
            </div>
            <div v-if="list.attachment && list.attachment.length" class="extra-box">
              <div class="flex-list">
                <span class="label" style="min-width: 44px;">附件：</span>
                <FileShowList :file-list="list.attachment || []" is-show-single-file style="max-width: calc(100% - 44px)" />
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
    <!-- 未审批人列表 -->
    <executorDialog
      ref="executorDialogRef"
      :dialog-form-visible="dialogFormVisible"
      :users="users"
      :is-recommit="isRecommit"
      :node-name="isCarbonCopy && carbonCopyName"
      :executor="executor"
      :show-badge="showExecutorBadge"
      @close="closeDialog"/>
    <richRemarkCheckDialog
      ref="richRemarkCheck"
      :dialog-form-visible="dialogRichCheckVisible"
      @close="richRemarkCheckClose"
    />
  </div>
</template>

<script>
import upAttachment from '@/components/Common/upAttachment/index';
import UserCard from '@/components/Common/userCard';
import executorDialog from './executorDialog';
import richRemarkCheckDialog from './richRemarkCheckDialog';
import FileShowList from '@/components/CreateOrder/fileShowList';
import AuditorAvatar from '@/components/Common/auditProcess/module/auditorAvatar';
import { mapState } from 'vuex';
import { standardFormat } from '@/filters/date';
import { mapOptions } from '@/filters';
import { statusOptions } from './options';
import { COMMIT_STATUS, COMMENT_DELETE_PERMISSION_OF_MODULE } from '@/utils/const';
import { PROCESS_NODE_STATUS, ROLE_TYPE } from '@/utils/const/process';
import { showModal } from '@/utils/message';
import { hasRouteAuth } from '@/utils/permission';
import { commentDelete } from '@/api/legal';

export default {
  components: {
    upAttachment,
    UserCard,
    executorDialog,
    FileShowList,
    AuditorAvatar,
    richRemarkCheckDialog
  },
  filters: {
    standardFormat,
    mapOptions
  },
  props: {
    items: {
      type: Array,
      default: () => []
    },
    processStatus: { // 审批流状态（全流程）
      type: Number,
      default: 0
    },
    showProcessStatus: { // timeline 第一条
      type: Boolean,
      default: false
    },
    isComment: { // 是否为评论节点
      type: Boolean,
      default: true
    },
    isCarbonCopy: { // 是否未抄送节点
      type: Boolean,
      default: false
    },
    isFlyNotice: { // 是否为飞来通告审批节点
      type: Boolean,
      default: false
    },
    carbonCopyName: { // 抄送节点名称
      type: String,
      default: ''
    },
    allApprover: { // 所有审批人员
      type: Array,
      default: () => []
    },
    isCreator: { // 是否为创建人
      type: Boolean,
      default: false
    },
    approvalModuleType: { // 模块对应类型
      type: Number,
      default: null
    },
    actionPermissions: { // 自定义表单页面操作权限
      type: Object,
      default: () => ({})
    },
    mainId: { // 详情ID
      type: Number | String,
      default: ''
    }
  },
  data() {
    return {
      PROCESS_NODE_STATUS, ROLE_TYPE,
      statusOptions,
      dropDowm: false,
      dialogFormVisible: false,
      dialogRichCheckVisible: false,
      users: [],
      executor: null,
      showExecutorBadge: false,
      isRecommit: COMMIT_STATUS.NOT_RECOMMIT,
      showToggleBtn: false, // 评论是否可伸缩
      isShowAllContent: false // 当前评论是否展开
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage,
      'userInfo': state => state.user.userInfo
    })
  },
  watch: {
    items: {
      handler(list) {
        this.setToggleBtnStatus(list);
      },
      immediate: true
    }
  },
  mounted() {
    window.addEventListener('resize', this.setToggleBtnStatus(this.items));
  },
  methods: {
    // 已有审批 且当前角色在users(未审批人)内 显示红点
    showDot(executor, users) {
      return executor && executor.length && users.some(item => Number(item.id) === this.userInfo.id);
    },
    // 评论删除：临时评论 且 （创建人 或 创建人权限 或 列表所有审批人 或 评论发布者 或 拥有评论删除权限）
    canDelComment(commentData) {
      const hasCommentDeletePermission = this.getCommentDeletePermission();
      return commentData.isTemp && (hasCommentDeletePermission ||
             this.isCreator || commentData.userId === this.userInfo.id ||
             this.allApprover.filter(approver => approver.id === this.userInfo.id).length);
    },
    getCommentDeletePermission() {
      if (this.approvalModuleType || this.approvalModuleType === 0) {
        if (this.approvalModuleType === -1) { // 自定义表单
          return !!this.actionPermissions.hasCommentsDelete;
        } else {
          const permission = COMMENT_DELETE_PERMISSION_OF_MODULE[this.approvalModuleType];
          return permission ? hasRouteAuth(permission) : false;
        }
      } else {
        return false;
      }
    },
    showNodeTime(data) {
      // 6: 未审批
      return data.time && (data.status !== 6 || (data.status === 6 && data.title === '任务结束'));
    },
    showCheckAllBtn(data) {
      const { executor, users } = data;
      if (Array.isArray(executor)) {
        if (Array.isArray(users)) {
          return executor.length + users.length >= 2;
        }
        return executor.length >= 2;
      } else {
        return Array.isArray(users) && users.length >= 2;
      }
    },
    // 都未审批 优先显示当前角色信息 无则显示第一个
    setUserList(list) {
      if (!Array.isArray(list) || !list.length) return [];
      const userList = _.cloneDeep(list);
      const curUserIndex = userList.findIndex(user => Number(user.id) === this.userInfo.id);
      if (curUserIndex > 0) {
        [userList[0], userList[curUserIndex]] = [userList[curUserIndex], userList[0]];
      }
      return userList;
    },
    // 合并审批人和为审批人
    mapAuditorList(list) {
      const users = Array.isArray(list.users) && list.users.length ? list.users : [];
      return [...list.executor, ...users];
    },
    closeDialog() {
      this.dialogFormVisible = false;
    },
    openDialog(list) {
      this.isRecommit = list.title === '重新提交' ? (list.status === PROCESS_NODE_STATUS.SUBMITTED ? COMMIT_STATUS.RECOMMIT : list.status === PROCESS_NODE_STATUS.NOT_SUBMIT ? COMMIT_STATUS.PENDING_RECOMMIT : COMMIT_STATUS.NOT_RECOMMIT) : COMMIT_STATUS.NOT_RECOMMIT;
      this.executor = list.executor;
      this.users = list.users;
      this.dialogFormVisible = true;
      this.showExecutorBadge = !!list.isSeries;
    },
    showAllOperator(list) {
      this.users = list.sendOperator;
      this.$refs['executorDialogRef'].sendTitle = '抄送人员';
      this.dialogFormVisible = true;
      this.showExecutorBadge = !!list.isSeries;
    },
    showAllAction(list) {
      return !this.showMobilePage && list.length > (this.showMobilePage ? 1 : 2);
    },
    // switch html 中的 img music video 标签为文案
    switchHtml(content) {
      if (!content) return;
      const html = content;
      // 过滤空审批意见
      const excludeHtmlTag = html.replace(/(<\/?p>|<br>|&nbsp;)/g, '');
      if (!excludeHtmlTag) return;
      let switchHtml;
      switchHtml = html.replace(/<img(.*?)\/>/g, '<span>【图片】</span>');
      switchHtml = switchHtml.replace(/<video(.*?)>(.*?)<\/video>/g, '<span>【视频】</span>');
      switchHtml = switchHtml.replace(/<table(.*?)>(.*?)<\/table>/g, '<span>【表格】</span>');
      switchHtml = switchHtml.replace(/<p>(.*?)<\/p>/g, '<span>$1</span>');
      return switchHtml;
    },
    setNotifyToDom(commentData) {
      const comment = _.cloneDeep(commentData);
      const { content, notifyUsers } = comment;
      if (notifyUsers && notifyUsers.length && !comment.isNewRichText) {
        let notifyUserDom = '';
        notifyUsers.forEach(user => {
          notifyUserDom += `<span style="white-space: nowrap; color: #406EFF; display: inline-block; margin-right: 0.4em"> @${user.userName}</span>`;
        });
        if (content.endsWith('</p>')) {
          comment.content = this.appendNotifyDom(content, notifyUserDom, 4);
        } else if (content.endsWith('</div>')) {
          comment.content = this.appendNotifyDom(content, notifyUserDom, 6);
        } else {
          comment.content = this.appendNotifyDom(content, notifyUserDom, 0);
        }
      }
      if (!this.isShowAllContent) {
        comment.content = comment.content.replace(/<img(.*?)>/g, `<span style="font-weight: bold">[图片]</span>`);
        comment.content = comment.content.replace(/<video(.*?)>(.*?)<\/video>/g, `<span style="font-weight: bold">[视频]</span>`);
        comment.content = comment.content.replace(/<table(.*?)>(.*?)<\/table>/g, `<span style="font-weight: bold">[表格]</span>`);
      }
      return comment.content;
    },
    appendNotifyDom(content, notifyUserDom, num) {
      let result = '';
      let contentLen = content.length;
      // 去除@符号前的换行符
      const linefeed = content.substring(contentLen - (num + 5), contentLen - num);
      if (linefeed === '<br/>') {
        content = content.slice(0, contentLen - (num + 5)) + content.slice(contentLen - num);
        contentLen -= 5;
      }
      switch (num) {
        case 4:
        case 6:
          result = content.slice(0, contentLen - num) + notifyUserDom + content.slice(contentLen - num);
          break;
        default:
          result = content + notifyUserDom;
          break;
      }
      return result;
    },
    setQuoteComment(data) {
      const quoteComment = _.cloneDeep(data);
      quoteComment.content = quoteComment.content.replace(/<img(.*?)>/g, `<span>[图片]</span>`);
      quoteComment.content = quoteComment.content.replace(/<video(.*?)>(.*?)<\/video>/g, `<span>[视频]</span>`);
      quoteComment.content = quoteComment.content.replace(/<table(.*?)>(.*?)<\/table>/g, `<span>[表格]</span>`);
      quoteComment.content = quoteComment.content.replace(/&nbsp|\s;/g, '').replace(/<\/?(?!(img|table|video)).*?>/g, ' ');
      quoteComment.content = `<span style="color: #333; font-size: 14px; font-weight: 400">[回复] ${quoteComment.userName}：</span>` + quoteComment.content;
      return quoteComment.content;
    },
    checkRichText(content) {
      this.$refs['richRemarkCheck'].initData(content);
      this.dialogRichCheckVisible = true;
    },
    richRemarkCheckClose() {
      this.dialogRichCheckVisible = false;
    },
    // 删除评论
    handleCommentDel(currComment) {
      showModal('请确认是否删除该评论').then(_ => {
        const params = {};
        params.id = currComment.id;
        params.moduleType = this.approvalModuleType;
        params.customApprovalId = this.mainId;
        commentDelete(params).then(_ => {
          this.$message.success('删除成功');
          this.$emit('reloadComment');
        });
      });
    },
    onReplyComment(commentData) {
      this.$emit('onReplyComment', commentData);
    },
    // 设置当前评论节点是否显示展开收起
    setToggleBtnStatus(list) {
      if (!this.isComment || this.isShowAllContent) return;
      const curCommentNode = list && list[0] || {};
      if (/<img|<video|<table/.test(curCommentNode.content)) {
        this.showToggleBtn = true;
        return;
      }
      this.$nextTick(() => {
        const className = '.commentBox_' + curCommentNode.id;
        const commentDom = document.querySelector(className);
        if (!commentDom) return false;
        this.showToggleBtn = commentDom.scrollHeight > commentDom.clientHeight;
      });
    },
    commentShowTypeChange() {
      if (!this.showToggleBtn) return;
      this.isShowAllContent = !this.isShowAllContent;
    }
  }
};
</script>

<style lang="scss" scoped>
%ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
%background {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}
$status:
  // #F9EBEB #E02020 1 0, // 草稿
  #a691ff #fff 1 -1, // 评论
  #406EFF #fff 1 1, // 提交
  #E02020 #fff 5 2, // 撤回
  #FD8546 #fff 3 3, // 审批中
  #31CC9C #fff 4 4, // 已审批
  #E02020 #fff 5 5, // 未过审
  #999999 #fff 6 6, // 未审批
  #406EFF #fff 7 7, // 已转交
  #FD8546 #fff 3 8, // 待提交
  #FF0808 #fff 5 10, // 审批超时
  #999999 #fff 6 11, // 未抄送
  #406EFF #fff 4 12, // 已抄送
  #FD8546 #fff 3 13, // 部分审批
  #FD8546 #fff 3 14; // 退回节点
.flex {
  display: flex;
  align-items: center;
}
.process-item {
  background: #fff;
  border-radius: 8px;
  padding: 12px;
  color: #666;
  box-shadow: 0 3px 6px #DDE1EA;
}
.process-item-box {
  margin-bottom: 12px;
  border-bottom: 1px solid #ebeefd;
  &:last-child {
    margin-bottom: 0;
    border-bottom: none !important;
  }
}
.process-item-hd {
  .title {
    font-size: 16px;
    font-weight: 600;
    line-height: 16px;
    color: #333;
    max-width: calc(100% - 120px);
    @extend %ellipsis;
  }
  .comment-user-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    .comment-username {
      margin: 0 8px;
      font-weight: 400;
      color: #333;
    }
    .comment-time {
      color: #999;
      font-size: 12px;
    }
  }
  .time {
    font-size: 12px;
    color: #999;
  }
}
.process-item-bd {
  padding-top: 12px;
  position: relative;
  .approver-change-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    .change-info-box {
      display: flex;
      align-items: center;
      max-width: calc((100% - 80px) / 2);
    }
    .arrow-icon {
      width: 44px;
      height: 20px;
      line-height: 20px;
      background: #D9F9EF;
      color: #31CC9C;
      font-size: 13px;
      display: inline-block;
      text-align: right;
      position: relative;
    }
    .arrow-icon::after {
      content: '';
      border: 15px solid transparent;
      border-right: 0;
      //border-left: 20px solid #ffefe6;
      border-left: 20px solid #D9F9EF;
      position: absolute;
      right: -20px;
      top: -5px;
    }
    .username {
      color: #333;
      width: calc(100% - 52px);
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
}
.operator-info {
  position: relative;
  display: flex;
  align-items: center;
  padding-bottom: 6px;
  .avatar {
    background: #DDE1EA;
    border: 1px solid #FFFFFF;
    border-radius: 50%;
    margin-right: 12px;
    // overflow: hidden;
    img {
      width: 100%;
    }
  }
  .name {
    font-size: 14px;
    line-height: 14px;
    color: #333;
    margin-right: 12px;
  }
}
.status {
  padding: 0 6px;
  height: 20px;
  font-size: 12px;
  background: #FFEFE6;
  border-radius: 999px;
  line-height: 20px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  .icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    @extend %background;
  }
}
@each $bgc, $color, $bg, $i in $status {
  .status#{$i} {
    background: $bgc;
    color: $color;
    @if $i != 7 {
      .icon {
        background-image: url('~@/assets/auditProcess/status#{$bg}.png');
      }
    }
  }
}
.comment-node-container {
  background-color: #FAFAFC;
  padding: 0 8px;
  margin-top: 8px;
  border-radius: 4px;
  &::v-deep {
    img, video {
      border-radius: 8px !important;
      max-width: calc(100% - 35px) !important;
      height: auto !important;
    }
    a {
      background-color: transparent !important;
      color: #406EFF !important;
      word-break: break-word;
    }
    ul, ol {
      margin: 0;
      padding-inline-start: 20px;
    }
    p {
      margin: 0;
      line-height: 1.5;
      text-align: left;
      overflow-wrap: break-word;
      word-break: break-word;
    }
    blockquote {
      background-color: #f5f2f0;
      border-left: 8px solid #b4d5ff;
      display: block;
      font-size: 100%;
      line-height: 1.5;
      margin: 10px 0 16px;
      padding: 10px;
    }
    table {
      border-collapse: collapse;
      padding: 0;
      border: 1px solid #ccc;
      border-radius: 3px;
      margin-bottom: 6px;
      tbody > tr:first-child {
        background-color: #eee;
      }
      th, td {
        border-right: 1px solid #ccc;
        border-top: 1px solid #ccc;
      }
      td:last-child, th:last-child {
        border-right: none;
      }
    }
  }
  .comment-content-outbox {
    display: flex;
    padding-bottom: 8px;
  }
  .comment-content-box {
    //display: -webkit-box;
    //-webkit-line-clamp: 3;
    //-webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
    position: relative;
    width: 100%;
    .comment-content {
      width: 100%;
      border-radius: 4px;
      padding-top: 8px;
    }
    .comment-action-btn {
      float: right;
      clear: both;
      padding: 0;
      font-size: 14px;
      position: relative;
    }
    .comment-content-ellipsis {
      margin-left: 12px;
    }
    .comment-content-ellipsis::before{
      content: '...';
      position: absolute;
      left: -2px;
      color: #666;
      transform: translateX(-100%)
    }
  }
  .comment-content-box::before{
    content: '';
    float: right;
    width: 0;
    height: 100%;
    margin-bottom: -1.25em;
  }
  .comment-content-extra {
    padding: 12px 0;
    border-top: 1px solid #EBEEFD;
    color: #999 !important;
    ::v-deep .file-list {
      max-width: calc(100% - 40px);
    }
    ::v-deep img {
      vertical-align: middle;
    }
  }
}
.comment-reply {
  font-size: 12px;
  color: #666;
  z-index: 100;
  height: 20px;
  line-height: 20px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  i {
    font-size: 14px;
    margin-top: 1px;
  }
  .comment-action:hover{
    color: #406eff !important;
    cursor: pointer;
  }
}
.extra-box {
  position: relative;
  margin-top: 6px;
  background: #FAFAFC;
  border-radius: 4px;
  padding: 10px 12px 10px 16px;
  line-height: 20px;
  word-break: break-all;
  .label {
    font-weight: 600;
    color: #333;
  }
  .flex-list {
    display: flex;
    // align-items: center;
    &::v-deep {
      .file-container {
        margin-top: 0 !important;
        width: 100%;
      }
    }
  }
}
.drop-btn {
  position: absolute;
  right: 12px;
  color: #406EFF;
  cursor: pointer;
  font-weight: bold;
  z-index: 100;
  &.dot {
    &::before {
      content: '';
      position: absolute;
      top: -4px;
      right: -6px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border: 2px solid #fff;
      background: red;
    }
  }
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-item {
  flex: 1;
}
</style>
